<template>
  <view class="index">
    <view class="apply-detail-view" style="padding: 20rpx">
      <view class="detail-item">
        <view class="title">店铺名称:</view>
        <view class="value">{{storeInfo.storeName}}</view>
      </view>
      <view class="detail-item">
        <view class="title">联系方式:</view>
        <view class="value">{{storeInfo.clerkName}} : {{storeInfo.clerkPhone}}</view>
<!--        <button class="copy-btn" @click="onCopy(storeInfo.clerkPhone)">复制</button>-->
      </view>

      <view class="detail-item">
        <view class="title">店铺类型:</view>
        <view class="value">{{storeInfo.storeType}}</view>
      </view>
      <view class="detail-item">
        <view class="title">店铺地址:</view>
        <view class="value">{{storeInfo.storeAddressDetail}}</view>
      </view>
<!--      <view class="detail-item">-->
<!--        <button class="nav-btn" @click="daohang()">导航</button>-->
<!--      </view>-->
    </view>
    <view class="service-section">
      <text class="section-title">商家服务 </text>
      <div class="menu-list" v-if="storeInfo.storeType==='房产中介'">
        <div
            class="menu-item"
            :class="{ 'disabled': storeInfo === null && item.name!== '店铺管理' }"
            @click="storeInfo === null && item.name!== '店铺管理'? null : navigateTo(item)"
            v-for="(item, index) in storeList"
            :key="index"
        >
          <div>
            <u-image
                width="88rpx"
                height="88rpx"
                class="menu-img"
                :src="item.icon"
            >
              <u-loading slot="loading"></u-loading>
            </u-image>
          </div>
          <div class="menu-title">{{ item.name }}</div>
        </div>
      </div>

      <div class="menu-list" v-else>
        <div
            class="menu-item"
            :class="{ 'disabled': storeInfo === null && item.name!== '店铺管理' }"
            @click="storeInfo === null && item.name!== '店铺管理'? null : navigateTo(item)"
            v-for="(item, index) in storeList2"
            :key="index"
        >
          <div>
            <u-image
                width="88rpx"
                height="88rpx"
                class="menu-img"
                :src="item.icon"
            >
              <u-loading slot="loading"></u-loading>
            </u-image>
          </div>
          <div class="menu-title">{{ item.name }}</div>
        </div>
      </div>

    </view>
  </view>
</template>

<script>
import config from "@/config/config";
import storage from "@/utils/storage.js";
import {getStoreByMember} from "@/api/store.js";
export default {
  data() {
    return {
      config,
      userInfo:{},
      storeInfo: {},
      storeList: [//房产中介
        { name: "我的店铺", icon: "heart", url: "/pages/product/shopPage" },
        { name: "修改店铺", icon: "heart", url: "/pages/manage/sub/addStore?type=1" },
        { name: "人员管理", icon: "heart", url: "/pages/manage/renManage" },
        {name:"店铺订单",icon:"order",url:"/pages/order/storeOrder"},
        { name: "信息曝光", icon: "order", url: "" },
        { name: "添加租房", icon: "order", url: "/pages/house/detail/zuHouse?agent=22" },
        { name: "添加二手房", icon: "order", url: "/pages/house/detail/preHouse?agent=22" },
        // { name: "访客信息", icon: "checkmark-circle", url: "/pages/mine/myTracks" },
        // { name: "我的收藏", icon: "heart", url: "/pages/mine/myCollect" },
        { name: "广告投放", icon: "order" },

      ],
      storeList2: [
        { name: "我的店铺", icon: "heart", url: "/pages/product/shopPage" },
        { name: "修改店铺", icon: "heart", url: "/pages/manage/sub/addStore?type=1" },
        {name:"店铺订单",icon:"order",url:"/pages/order/storeOrder"},
        { name: "信息曝光", icon: "order", url: "" },
        { name: "人员管理", icon: "heart", url: "/pages/manage/renManage" },
        // { name: "访客信息", icon: "checkmark-circle", url: "/pages/mine/myTracks" },
        // { name: "我的收藏", icon: "heart", url: "/pages/mine/myCollect" },
        { name: "广告投放", icon: "order" },
        { name: "商品管理", icon: "info-circle", url: "/pages/manage/goodManage" },
        { name: "添加商品", icon: "info-circle", url: "/pages/store/createGoods" },
        // { name: "人员管理", icon: "heart", url: "/pages/manage/renManage" },
        { name: "优惠劵管理", icon: "heart", url: "/pages/manage/cartManage" },
      ],
    };
  },
  onLoad() {
    this.userInfo=storage.getUserInfo();
  },

  mounted(){
    if (this.$options.filters.tipsToLogin()) {
      this.getStoreInfo();
    }
   // this.memberInfo = this.$options.filters.isLogin();

  },
  methods: {
    onCopy(phone){
      //复制手机号
      uni.setClipboardData({
        data: phone,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          });
        }
      });

    },
    getStoreInfo(){

      getStoreByMember(this.userInfo.id).then(res =>{

        if (res.statusCode==200) {
          this.storeInfo = res.data;
          uni.setStorageSync("store",  this.storeInfo);
        }
      })
    },
    navigateTo(item) {

      if(item.name=="我的店铺"){
        uni.navigateTo({
          url:item.url+"?storeId="+this.storeInfo.id,
        });
      }else{
        uni.navigateTo({
          url:item.url,
        });
      }

    },

  },
};
</script>

<style lang="scss" scoped>
.apply-detail-view {
  background-color: $aider-color-blue;
  margin-top: 10rpx;
  padding: 20rpx;
  color: #666666;

  .detail-item {
    padding: 12rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 28rpx;
    .title {
      padding-left: 10rpx;
      width: 140rpx;
    }
    .value {
      padding-left: 40rpx;
    }
  }
}
.status-info {
  flex-direction: row;
  //background-color: red;
  .status-info-box {
    height: 180rpx;
    flex-direction: row;
    padding-left: 54rpx;
    padding-right: 54rpx;
    padding-top: 20rpx;
    font-family: PingFangSC-Regular;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0);
    line-height: 50rpx;

    .status-val {
      font-size: 32rpx;
    }
    .status-tip {
      font-size: 28rpx;
    }
  }
}

.service-section {
  //margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.menu-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  >.menu-item {
    text-align: center;
    width: 25%;
    // flex: 1;
    margin: 20rpx 0;
  }
}
.menu-img {
  display: flex;
  margin: 0 auto;
  width: 88rpx;
  height: 88rpx;
}
.menu-title {
  font-size: 28rpx;
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.copy-btn {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10rpx 20rpx;
  margin-left: 20rpx;
  font-size: 28rpx;
  transition: background-color 0.3s ease;
  &:hover {
    background-color: #0056b3;
  }
}

.nav-btn {
  background-color: #ff3b30;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 15rpx 30rpx;
  font-size: 28rpx;
  width: 100%;
  transition: background-color 0.3s ease;
  &:hover {
    background-color: #e62920;
  }
}
</style>